<!--成熟度管理板块-->
<!--用户权限说明-->
<!--管理员：代码：1，可以做所有的操作-->
<template>
  <div style="margin: 0;padding: 0">
    <el-container>
      <!--页面表头设计-->
      <el-header style="height: 7vh">
        <el-link class="headMain" href="http://10.255.96.48:3404/">俄动力质量管理系统</el-link>
        <span class="center-text">成熟度提升管理</span>
        <el-popover
            placement="top-start"
            title="用户信息"
            width="200"
            trigger="hover">
          <div style="margin-top: 10px">Name：{{useName}}</div>
          <div style="margin-top: 10px">ID:{{useId}}</div>
          <div style="margin-top: 10px" @click="logOut"><el-link>退出</el-link></div>
          <div class="headMain" slot="reference">{{useName}}</div>
        </el-popover>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-divider>质量</el-divider>
          <div style="margin-top:10px;">
            <el-button style="width: 100%"
                       :style="{backgroundColor:buttonStyle[0].backColor,color:buttonStyle[0].textColor}"
                       @click="buttonMainSelect(0)">过程要素：P2</el-button>
          </div>
          <div style="margin-top:10px;" >
            <el-button style="width: 100%"
                       :style="{backgroundColor:buttonStyle[1].backColor,color:buttonStyle[1].textColor}"
                       @click="buttonMainSelect(1)">过程要素：P3</el-button>
          </div>
          <div style="margin-top:10px;">
            <el-button style="width: 100%"
                       :style="{backgroundColor:buttonStyle[2].backColor,color:buttonStyle[2].textColor}"
                       @click="buttonMainSelect(2)">过程要素：P4</el-button>
          </div>
          <div style="margin-top:10px;">
            <el-button style="width: 100%"
                       :style="{backgroundColor:buttonStyle[3].backColor,color:buttonStyle[3].textColor}"
                       @click="buttonMainSelect(3)">过程要素：P5</el-button>
          </div>
          <div style="margin-top:10px;">
            <el-button style="width: 100%"
                       :style="{backgroundColor:buttonStyle[4].backColor,color:buttonStyle[4].textColor}"
                       @click="buttonMainSelect(4)">过程要素：P6</el-button>
          </div>
          <div style="margin-top:10px;">
            <el-button style="width: 100%"
                       :style="{backgroundColor:buttonStyle[5].backColor,color:buttonStyle[5].textColor}"
                       @click="buttonMainSelect(5)">过程要素：P7</el-button>
          </div>
          <el-divider>设备</el-divider>
          <div style="margin-top:10px;">
            <el-button style="width: 100%"
                       :style="{backgroundColor:buttonStyle[6].backColor,color:buttonStyle[6].textColor}"
                       @click="buttonMainSelect(6)">组织构架</el-button>
          </div>
          <div style="margin-top:10px;">
            <el-button style="width: 100%"
                       :style="{backgroundColor:buttonStyle[7].backColor,color:buttonStyle[7].textColor}"
                       @click="buttonMainSelect(7)">方针目标与基础指标</el-button>
          </div>
          <div style="margin-top:10px;">
            <el-button style="width: 100%"
                       :style="{backgroundColor:buttonStyle[8].backColor,color:buttonStyle[8].textColor}"
                       @click="buttonMainSelect(8)">组织协同</el-button>
          </div>
          <div style="margin-top:10px;">
            <el-button style="width: 100%"
                       :style="{backgroundColor:buttonStyle[9].backColor,color:buttonStyle[9].textColor}"
                       @click="buttonMainSelect(9)">员工素养</el-button>
          </div>
          <div style="margin-top:10px;">
            <el-button style="width: 100%"
                       :style="{backgroundColor:buttonStyle[10].backColor,color:buttonStyle[10].textColor}"
                       @click="buttonMainSelect(10)">班组建设</el-button>
          </div>
          <div style="margin-top:10px;">
            <el-button style="width: 100%"
                       :style="{backgroundColor:buttonStyle[11].backColor,color:buttonStyle[11].textColor}"
                       @click="buttonMainSelect(11)">现场管理</el-button>
          </div>
        </el-aside>
        <el-container>
          <!--主题设计-->
          <el-main style="height: 79vh;overflow: auto">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="提升措施" name="first">
                <el-button @click="projectEditShow(1)" size="small" v-if="maturityData.length===0">添加大项目</el-button>
                <div v-if="maturityData.length>0">
                  <el-collapse v-model="collapseName" accordion @change="handleChange">
                    <el-collapse-item v-for="item in collapseItems" :key="item.key" :name="item.name">
                      <template v-slot:title>
                        {{item.title}}
                        <i class="header-icon el-icon-info"></i>
                      </template>
                      <!--序号循环，子项目单独做一个数据结构-->
                      <div v-for="(element, index) in sub_element" :key="index" style="font-size: 14px">
                        <!--表头部分-->
                        <el-divider></el-divider>
                        <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 8px;">
                          <div>
                            <span style="color: red"><strong>子项目：</strong></span>
                            <span>{{element.sub_element_name}}</span>
                          </div>
                          <span>
                            <el-button style="margin-bottom: 8px" @click="questionForm(5,index,element)" size="small">修改子项目</el-button>
                            <el-button style="margin-bottom: 8px" @click="projectEditShow(2,null)" size="small">添加子项目</el-button>
                            <el-button style="margin-bottom: 8px" @click="projectEditShow(1000,null)" size="small">大项目排序</el-button>
                            <el-button style="margin-bottom: 8px" @click="projectEditShow(1,null)" size="small">添加大项目</el-button>
                          </span>
                        </div>
                        <el-divider></el-divider>
                        <!--提问表-->
                        <div style="margin-top: 8px">
                          <!--提问表部分-->
                          <el-descriptions title="标准要求：" direction="vertical" :column="4" border>
                            <el-descriptions-item label="提问表">
                              <div style="width: 500px"><span v-html="element.question_form.value"></span></div>
                              <el-link @click="questionForm(1,index,element.question_form)"><i class="el-icon-edit"></i></el-link>
                            </el-descriptions-item>
                            <el-descriptions-item label="执行示例">
                              <div style="width: 500px"><span v-html="element.execution_example.value"></span></div>
                              <el-link @click="questionForm(2,index,element.execution_example)"><i class="el-icon-edit"></i></el-link>
                            </el-descriptions-item>
                            <el-descriptions-item label="分值">
                              <el-link @click="questionForm(3,index,element.score)">
                                {{element.score.value}}
                              </el-link>
                            </el-descriptions-item>
                            <el-descriptions-item label="参考文件">
                              <el-link @click="questionForm(4,index,element.reference_file)">{{element.reference_file.value}}</el-link>
                            </el-descriptions-item>
                          </el-descriptions>
                        </div>
                        <div style="margin-top: 5px">
                          <el-button v-if="element.questionItem.length===0" @click="projectEditShow(3)" size="small">添加问题</el-button>
                        </div>
                        <!--分割线-->
                        <el-divider><span style="color: #0269fa">提问表措施</span></el-divider>
                        <!--问题对策表-->
                        <div v-for="(questionItem, index1) in element.questionItem" :key="index1" style="font-size: 14px">
                          <!--问题表头-->
                          <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 8px;">
                            <div>
                              <strong style="color: red;">问题：{{questionItem.questionName}}</strong>
                            </div>
                            <span>
                            <el-button style="margin-bottom: 8px" @click="problemEditShow(1,questionItem,index1)" size="small">修改问题</el-button>
                            <el-button style="margin-bottom: 8px" @click="projectEditShow(3,questionItem)" size="small">添加问题</el-button>
                          </span>
                          </div>
                          <!--问题措施-->
                          <div>
                            <el-table
                                :data="questionItem.measures"
                                border
                                style="width: 100%">
                              <el-table-column
                                  prop="id"
                                  label="序号"
                                  width="60"
                                  v-slot:default="scope">
                                <div style="text-align: center">{{scope.$index+1}}</div>
                              </el-table-column>
                              <el-table-column
                                  prop="measures"
                                  label="措施"
                                  v-slot:default="scope">
                                <div v-html="scope.row.measures"></div>
                                <el-link @click="measuresEditShow(2,scope,index,index1)"><i class="el-icon-edit"></i></el-link>
                                <el-link style="margin-left: 10px;" @click="measuresEditShow(3,scope,index,index1)"><i class="el-icon-delete"></i></el-link>
                                <el-link style="margin-left: 15px" v-if="questionItem.measures.length-1===scope.$index" @click="measuresEditShow(1,scope,index,index1)"><i class="el-icon-circle-plus-outline"></i></el-link>
                              </el-table-column>
                              <el-table-column
                                  prop="output"
                                  label="输出"
                                  width="180">
                              </el-table-column>
                              <el-table-column
                                  prop="person"
                                  label="负责人"
                                  width="100">
                              </el-table-column>
                              <el-table-column
                                  prop="endDate"
                                  label="完成时间"
                                  width="100">
                              </el-table-column>
                            </el-table>
                          </div>
                        </div>
                      </div>
                    </el-collapse-item>
                  </el-collapse>
                </div>
              </el-tab-pane>
              <el-tab-pane label="输出列表" name="second">
                <el-button size="small" style="margin-bottom: 8px" @click="outputFileEditShow(1,null)">新增加输出物</el-button>
                <div>
                  <el-table
                      :data="outputFileData"
                      border
                      style="width: 100%">
                    <!-- 文件名称列 -->
                    <el-table-column
                        prop="filedName"
                        label="文件名称">
                    </el-table-column>
                    <!-- 文件类型列 -->
                    <el-table-column
                        prop="filedType"
                        label="文件类型">
                    </el-table-column>
                    <!-- 完成时间列 -->
                    <el-table-column
                        prop="outputDate"
                        label="完成时间">
                    </el-table-column>
                    <!-- 输出部门列 -->
                    <el-table-column
                        prop="department"
                        label="输出部门">
                    </el-table-column>
                    <el-table-column
                        label="编辑"
                    width="100"
                    v-slot:default="scope">
                      {{scope.row}}
                    </el-table-column>
                  </el-table>
                </div>
              </el-tab-pane>
              <el-tab-pane label="模型说明" name="third">模型说明</el-tab-pane>
            </el-tabs>
          </el-main>
          <el-footer>
            <el-button plain size="small">中  文</el-button>
            <el-button plain size="small">Русский язык</el-button>
            <el-button plain size="small">English</el-button>
          </el-footer>
        </el-container>
      </el-container>
    </el-container>

    <!--弹窗放置区-->
    <!--添加一个项目-->
    <el-dialog
        :title="titleUse"
        :visible.sync="projectEditDialog"
        width="40%"
        :before-close="handleClose">
      <el-form ref="tableDataForm" :model="maturityDataFromProject" label-width="120px">
        <el-form-item label="项目名称：">
          <el-input disabled v-model="maturityDataFromProject.project" style="width:90%" ></el-input>
        </el-form-item>
        <el-form-item label="条款名称：">
          <el-input :disabled="process_elementDisabled" v-model="maturityDataFromProject.process_element" style="width: 90%"></el-input>
        </el-form-item>
        <el-form-item label="子项目名称：">
          <el-input v-model="maturityDataFromProject.sub_element" style="width: 90%"></el-input>
        </el-form-item>
        <el-form-item label="提 问 表：">
          <el-input
              v-model="maturityDataFromProject.question_form"
              style="width: 90%"
              type="textarea"
              :autosize="{ minRows: 1, maxRows: 4}"></el-input>
        </el-form-item>
        <el-form-item label="执行案例：">
          <el-input
              style="width: 90%"
              v-model="maturityDataFromProject.execution_example"
              type="textarea"
              :autosize="{ minRows: 1, maxRows: 4}"></el-input>
        </el-form-item>
        <el-form-item label="分   值：">
          <el-input-number style="width: 90%" v-model="maturityDataFromProject.score"></el-input-number>
        </el-form-item>
        <el-form-item label="参考文件：">
          <el-input
              placeholder="新建后编辑"
              style="width: 90%"
              v-model="maturityDataFromProject.reference_file"
              type="textarea"
              :autosize="{ minRows: 1, maxRows: 4}"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="projectEditDialog=false">取消</el-button>
          <el-button type="primary" @click="projectEditOk">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!--添加问题-->
    <el-dialog
        :title="titleUse"
        :visible.sync="problemEditDialog"
        width="40%"
        :before-close="handleClose">
      <el-form ref="tableDataForm" :model="maturityDataFromProject" label-width="120px">
        <el-form-item label="项目名称：">
          <el-input disabled v-model="maturityDataFromProject.project" style="width:90%" ></el-input>
        </el-form-item>
        <el-form-item label="条款名称：">
          <el-input :disabled="process_elementDisabled" v-model="maturityDataFromProject.process_element" style="width: 90%"></el-input>
        </el-form-item>
        <el-form-item label="子项目名称：">
          <el-input :disabled="sub_elementDisabled" v-model="maturityDataFromProject.sub_element" style="width: 90%"></el-input>
        </el-form-item>
        <el-form-item label="问题名称：">
          <el-input
              v-model="maturityDataFromProject.question_form"
              style="width: 90%"
              type="textarea"
              :autosize="{ minRows: 1, maxRows: 4}"></el-input>
        </el-form-item>
        <el-form-item label="分   值：">
          <el-input-number style="width: 90%" v-model="maturityDataFromProject.score"></el-input-number>
        </el-form-item>
        <el-form-item>
          <el-button @click="problemEditDialog=false">取消</el-button>
          <el-button type="primary" @click="projectEditOk">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!--单击编辑区的弹窗，需要富文本区域的地方使用-->
    <el-dialog
        :title="titleUse"
        :visible.sync="fullTextDialog"
        width="60%"
        :before-close="handleClose">
      <div ref="editorContainer" style="text-align: left"></div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="fullTextDialog = false">取 消</el-button>
    <el-button type="primary" @click="editMaturityManageOk">确 定</el-button>
  </span>
    </el-dialog>
    <!--单击编辑区的弹窗，需要一个输入数据的地方使用-->
    <el-dialog
        :title="titleUse"
        :visible.sync="nmbDialog"
        width="30%"
        :before-close="handleClose">
      <el-input-number label="请输入数量" v-model="inputNub"></el-input-number>
      <span slot="footer" class="dialog-footer">
    <el-button @click="nmbDialog = false">取 消</el-button>
    <el-button type="primary" @click="editMaturityManageOk">确 定</el-button>
  </span>
    </el-dialog>
    <!--单击编辑区的弹窗，一个长的文本框-->
    <el-dialog
        :title="titleUse"
        :visible.sync="textBigDialog"
        width="620"
        :before-close="handleClose">
      <div>
        <el-input v-model="textInput" style="width: 600px"></el-input>
      </div>
      <div style="margin-top: 15px">
        <el-button style="margin-right: 15px" @click="textBigDialog=false">取消</el-button>
        <el-button @click="editMaturityManageOk">提交</el-button>
      </div>
    </el-dialog>
    <!--单击编辑区的弹窗，一个长的文本框，用在编辑问题上-->
    <el-dialog
        :title="titleUse"
        :visible.sync="problemTextBigDialog"
        width="620"
        :before-close="handleClose">
      <div>
        <el-input v-model="textInput" style="width: 600px"></el-input>
      </div>
      <div style="margin-top: 15px">
        <el-button style="margin-right: 15px" @click="problemTextBigDialog=false">取消</el-button>
        <el-button @click="editProblemOk">提交</el-button>
      </div>
    </el-dialog>
    <!--单击措施编辑区的弹窗，需要富文本区域，并且一次要把负责人等信息全部维护-->
    <el-dialog
        :title="titleUse"
        :visible.sync="measuresFullTextDialog"
        width="800"
        :before-close="handleClose">
      <div ref="editorContainer" style="text-align: left;"></div>
      <el-form ref="tableDataForm" :inline="true" :model="measuresFrom" label-width="100px" style="margin-top: 10px">
        <el-form-item label="负责人：">
          <el-input  v-model="measuresFrom.person" style="width: 250px"></el-input>
        </el-form-item>
        <el-form-item label="完成时间：">
          <el-input  v-model="measuresFrom.endDate" style="width: 250px"></el-input>
        </el-form-item>
        <div>
          <el-form-item label="输出：">
            <el-input  v-model="measuresFrom.output" style="width: 610px"></el-input>
          </el-form-item>
        </div>
      </el-form>
      <div>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="measuresFullTextDialog = false">取 消</el-button>
    <el-button type="primary" @click="measuresEditOk">确 定</el-button>
  </span>
    </el-dialog>
    <!--插入/编辑一个输出物的弹窗-->
    <el-dialog
        :title="titleUse"
        :visible.sync="outPutEditDialog"
        width="650px"
        :before-close="handleClose">
      <el-form ref="outputFileFrom" :inline="true" :model="outputFileFrom" label-width="120px">
        <div>
          <el-form-item label="文件名称：">
            <el-input  v-model="outputFileFrom.filedName" style="width: 450px" ></el-input>
          </el-form-item>
        </div>
        <el-form-item label="文件类型：">
          <el-select v-model="outputFileFrom.filedType" clearable placeholder="请选择" style="width: 150px">
            <el-option
                v-for="item in fileTypeOption"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="输出时间：">
          <el-select v-model="outputFileFrom.outputDate" clearable placeholder="请选择" style="width: 150px">
            <el-option
                v-for="item in outputDateOption"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <div>
          <el-form-item label="体系编号：">
            <el-input  v-model="outputFileFrom.systemId" style="width: 450px" ></el-input>
          </el-form-item>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="outPutEditDialog = false">取 消</el-button>
    <el-button type="primary" @click="outputFileEditOk()">确 定</el-button>
  </span>
    </el-dialog>
    <!--对大项目进行排序-->
    <el-dialog
        :title="titleUse"
        :visible.sync="sortItemDialog"
        width="650px"
        :before-close="handleClose">
      <el-table
          :data="collapseItems"
          stripe
          style="width: 100%">
        <el-table-column
            label="序号"
            v-slot:default="scope"
        width="50">
          <span>{{scope.$index+1}}</span>
        </el-table-column>
        <el-table-column
            prop="title"
            label="大项目名称">
        </el-table-column>
        <el-table-column
            label="编辑"
        v-slot:default="scope"
        width="70">
          <el-link @click="sortItemMove(1,scope)"><i class="el-icon-upload2"></i></el-link>
          <el-link @click="sortItemMove(2,scope)" style="margin-left: 10px"><i class="el-icon-download"></i></el-link>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
    <el-button @click="sortItemDialog = false">取 消</el-button>
    <el-button type="primary" @click="sortItemEditOk">确 定</el-button>
  </span>
    </el-dialog>

    <!--抽屉放置区域-->
  </div>
</template>

<script>
import _ from "lodash";
import E from "wangeditor";

export default {
  name: "maturityManage",
  data() {
    return {
      editor: null, // 存储编辑器实例
      activeName:'first',
      //用户权限相关的变量
      useName:'',//用户名称
      useId:'',//用户编号
      usePower:'',//用户权限

      buttonStyle:[
        {
          backColor:'blue',textColor:'white',id:0,val:'过程要素：P2，项目管理',
        },
        {
          backColor:'',textColor:'',id:1,val:'过程要素：P3，产品和生产过程开发的策划',
        },
        {
          backColor:'',textColor:'',id:2,val:'过程要素：P4，产品和生产过程开发的实现',
        },
        {
          backColor:'',textColor:'',id:3,val:'过程要素：P5，供方管理',
        },
        {
          backColor:'',textColor:'',id:4,val:'过程要素：P6，过程分析/生产',
        },
        {
          backColor:'',textColor:'',id:5,val:'过程要素：P7，顾客服务',
        },
        {
          backColor:'',textColor:'',id:6,val:'设备板块：组织架构',
        },
        {
          backColor:'',textColor:'',id:7,val:'设备板块：方针目标与基础指标',
        },
        {
          backColor:'',textColor:'',id:8,val:'设备板块：组织协同',
        },
        {
          backColor:'',textColor:'',id:9,val:'设备板块：员工素养',
        },
        {
          backColor:'',textColor:'',id:10,val:'设备板块：班组建设',
        },
        {
          backColor:'',textColor:'',id:11,val:'设备板块：现场管理',
        },
        {
          backColor:'',textColor:'',id:12,val:'',
        },
        {
          backColor:'',textColor:'',id:13,val:'',
        },
        {
          backColor:'',textColor:'',id:14,val:'',
        },
        {
          backColor:'',textColor:'',id:15,val:'',
        },
        {
          backColor:'',textColor:'',id:16,val:'',
        },
        {
          backColor:'',textColor:'',id:17,val:'',
        },
      ],

      //成熟度的总数据表,每一个数据中，一个提问问题就是一行数据，多的措施填写到一个单元格中，每一个对策包括了：措施、输出、完成时间、负责部门四项内容，每个措施用|-|隔开靠，措施中的小项用|%|隔开
      maturityData:[
        {
          // id
          idUse: '', // type: String

          // 创建时间
          create_time: null, // type: LocalDateTime (can be represented as a Date object in JavaScript)

          // 更新时间
          update_time: null, // type: LocalDateTime (can be represented as a Date object in JavaScript)

          // 创建人
          creator: '', // type: String

          // 流程状态
          process_status: '', // type: String

          // 更新人
          sys_update_user: '', // type: String

          // 审核人
          sys_audit_user: '', // type: String

          // 审核时间
          sys_audit_time: null, // type: LocalDateTime (can be represented as a Date object in JavaScript)

          // 逻辑删除
          sys_deleted: null, // type: Long (can be represented as a Number in JavaScript)

          // 项目 -> Project(记录最外层的，例如P7）
          project: '', // type: String

          // 过程要素 -> Process Element(记录第二层，丽日P7.1）
          process_element: '', // type: String

          // 子要素 -> Sub-element(记录第三层，丽日P7.1.1）
          sub_element: '', // type: String
          //记录是什么类型：有’总则‘，总则只有一个，有’问题‘，问题是多个，就是一个一个的提问表
          quest_type:'',//type: String

          // 提问表 -> Question Form 总则是记录提问表，问题，就是记录每一个小的问题，
          question_form: '', // type: String

          // 执行示例 -> Execution Example 只有在’总则‘中有内容，在’问题‘中，是没有内容；
          execution_example: '', // type: String

          // 分值 -> Score 只有在’总则‘中有内容，在’问题‘中，是没有内容；
          score: '', // type: String

          // 参考文件 -> Reference File 只有在’总则‘中有内容，在’问题‘中，是没有内容；
          reference_file: '', // type: String

          // 措施 -> Measures 只有在’问题‘中有内容，在’总则‘中，是没有内容；
          measures: '', // type: String

          // 输出 -> Output 只有在’总则‘中有内容，在’问题‘中，是没有内容；
          output: '', // type: String

          // 顺序号 -> Sequence Number 只有在’总则‘中有内容，在’问题‘中，是没有内容；
          sequence_number: '', // type: String

          //质量体系文件
          quality_system:'',
        }
      ],
      //添加大项目、二级项目用到的表单项
      maturityDataFromProject:{
        // id
        idUse: '', // type: String

        // 创建时间
        create_time: null, // type: LocalDateTime (can be represented as a Date object in JavaScript)

        // 更新时间
        update_time: null, // type: LocalDateTime (can be represented as a Date object in JavaScript)

        // 创建人
        creator: '', // type: String

        // 流程状态
        process_status: '', // type: String

        // 更新人
        sys_updateUser: '', // type: String

        // 审核人
        sys_auditUser: '', // type: String

        // 审核时间
        sys_auditTime: null, // type: LocalDateTime (can be represented as a Date object in JavaScript)

        // 逻辑删除
        sys_deleted: null, // type: Long (can be represented as a Number in JavaScript)

        // 项目 -> Project(记录最外层的，例如P7）
        project: '', // type: String

        // 过程要素 -> Process Element(记录第二层）
        process_element: '', // type: String

        // 子要素 -> Sub-element(记录第三层）
        sub_element: '', // type: String
        //记录是什么类型：有’总则‘，总则只有一个，有’问题‘，问题是多个，就是一个一个的提问表
        quest_type:'',//type: String

        // 提问表 -> Question Form 总则是记录提问表，问题，就是记录每一个小的问题的名称，
        question_form: '', // type: String

        // 执行示例 -> Execution Example 只有在’总则‘中有内容，在’问题‘中，是没有内容；
        execution_example: '', // type: String

        // 分值 -> Score 只有在’总则‘中有内容，在’问题‘中，是没有内容；
        score: '', // type: String

        // 参考文件 -> Reference File 只有在’总则‘中有内容，在’问题‘中，是没有内容；
        reference_file: '', // type: String

        // 措施 -> Measures 只有在’问题‘中有内容，在’总则‘中，是没有内容；
        measures: '', // type: String

        // 输出 -> Output 只有在’总则‘中有内容，在’问题‘中，是没有内容；
        output: '', // type: String

        // 顺序号 -> Sequence Number 只有在’总则‘中有内容，在’问题‘中，是没有内容；
        sequence_number: '', // type: String

        //质量体系文件
        quality_system:'',
      },

      //成熟度的总数据表表单
      maturityDataFrom:{
        // id
        idUse: '', // type: String

        // 创建时间
        create_time: null, // type: LocalDateTime (can be represented as a Date object in JavaScript)

        // 更新时间
        update_time: null, // type: LocalDateTime (can be represented as a Date object in JavaScript)

        // 创建人
        creator: '', // type: String

        // 流程状态
        process_status: '', // type: String

        // 更新人
        sys_updateUser: '', // type: String

        // 审核人
        sys_auditUser: '', // type: String

        // 审核时间
        sys_auditTime: null, // type: LocalDateTime (can be represented as a Date object in JavaScript)

        // 逻辑删除
        sys_deleted: null, // type: Long (can be represented as a Number in JavaScript)

        // 项目 -> Project(记录最外层的，例如P7）
        project: '', // type: String

        // 过程要素 -> Process Element(记录第二层，丽日P7.1）
        process_element: '', // type: String

        // 子要素 -> Sub-element(记录第三层，丽日P7.1.1）
        sub_element: '', // type: String
        //记录是什么类型：有’总则‘，总则只有一个，有’问题‘，问题是多个，就是一个一个的提问表
        quest_type:'',//type: String

        // 提问表 -> Question Form 总则是记录提问表，问题，就是记录每一个小的问题，
        question_form: '', // type: String

        // 执行示例 -> Execution Example 只有在’总则‘中有内容，在’问题‘中，是没有内容；
        execution_example: '', // type: String

        // 分值 -> Score 只有在’总则‘中有内容，在’问题‘中，是没有内容；
        score: '', // type: String

        // 参考文件 -> Reference File 只有在’总则‘中有内容，在’问题‘中，是没有内容；
        reference_file: '', // type: String

        // 措施 -> Measures 只有在’问题‘中有内容，在’总则‘中，是没有内容；
        measures: '', // type: String

        // 输出 -> Output 只有在’总则‘中有内容，在’问题‘中，是没有内容；
        output: '', // type: String

        // 顺序号 -> Sequence Number 只有在’总则‘中有内容，在’问题‘中，是没有内容；
        sequence_number: '', // type: String

        //质量体系文件
        quality_system:'',
      },
      maturityDataDoe:null,
      collapseName: '1',  // 默认展开第一个项
      collapseItems: [
        { title: '',//记录的是表头
          name: '',//记录的是这个collapse的名字
          key:0,//collapse的key
          idUse:null,//记录大表上的idUse，作为修改顺序使用
        },
      ],//折叠主干的数据
      //记录子项目的变量
      sub_element:[
        {
          //子项目名称
          sub_element_name:'',
          //提问表
          question_form:{id:null,value:''},
          //执行案例
          execution_example:{id:null,value: ''},
          //分值
          score:{id:null,value:''},
          //参考文件
          reference_file:{id:null,value:''},
          //问题相关，是一个数组
          questionItem:[
            {
              id:null,
              questionName:'',//问题名称
              //措施，是一个数组，在数据表中，每一个措施，就是一个数据行。
              measures:[
                {
                  id: null,
                  //措施
                  measures:'第一个措施',
                  //负责人
                  person:'赵永峰',
                  //完成时间
                  endDate:'每月5日',
                  //输出,所有的输出放在一个字符串下，一条措施对应一个输出
                  output:'第一个文件'
                },
                {
                  id: null,
                  //措施
                  measures:'第二个措施',
                  //负责人
                  person:'赵永峰',
                  //完成时间
                  endDate:'每月5日',
                  //输出,所有的输出放在一个字符串下，一条措施对应一个输出
                  output:'第二个文件'
                },
              ]
            }
          ]
        }
      ],//记录的是子项目,有多个子项目，需要把对应的数据库的id记录下来
      //记录点击问题，修改问题的表单
      problemFrom:{
        id:null,
        questionName:'',//问题名称
        //措施，是一个数组，在数据表中，每一个措施，就是一个数据行。
        measures:[
          {
            id: null,
            //措施
            measures:'第一个措施',
            //负责人
            person:'赵永峰',
            //完成时间
            endDate:'每月5日',
            //输出,所有的输出放在一个字符串下，一条措施对应一个输出
            output:'第一个文件'
          },
          {
            id: null,
            //措施
            measures:'第二个措施',
            //负责人
            person:'赵永峰',
            //完成时间
            endDate:'每月5日',
            //输出,所有的输出放在一个字符串下，一条措施对应一个输出
            output:'第二个文件'
          },
        ]
      },
      //修改问题时的类型，1：修改问题名称，
      problemDoe:0,
      //修改问题的scope格式
      problemScope:null,
      //修改对策的表单
      measuresFrom:{
        id: null,
        //措施
        measures:'第一个措施',
        //负责人
        person:'赵永峰',
        //完成时间
        endDate:'每月5日',
        //输出,所有的输出放在一个字符串下，一条措施对应一个输出
        output:'第一个文件'
      },
      //修改对策的Scope格式
      measuresScope:null,
      //修改措施的类别1:新增；2；修改
      measuresDoe:0,
      //弹窗的提示信息
      titleUse:'提示',
      projectEditDialog:false,//控制对项目编辑的弹窗控制
      problemEditDialog:false,//控制对问题编辑的弹窗控制
      fullTextDialog:false,//控制对富文本的弹框
      nmbDialog:false,//控制一个输入数字的弹框
      textBigDialog:false,//控制一个输入长文本的弹框
      problemTextBigDialog:false,//控制一个输入长文本的弹框,用在编辑问题上
      measuresFullTextDialog:false,//控制编辑措施的地方
      outPutEditDialog:false,//控制编辑输出物的弹窗
      sortItemDialog:false,//对大项目排序的弹窗
      inputNub:0,//弹窗中，记录用户输入的一个数值型数据
      textInput:'',//弹窗中，记录用户输入的一个文本

      process_elementDisabled:true,//控制二层目录是否可用
      sub_elementDisabled:true,//控制子项目是否可以

      //输出文件列表的大表
      outputFileData:[
        {
          idUse:null,//主键Id
          establishTime:null,//创建时间
          updateTime:null,//修改时间
          deleteSign:1,//删除标记
          editName:'',//编辑人

          filedName:'',//文件名称
          filedType:'',//文件类型
          outputDate:'',//完成时间
          department:'',//输出部门
          systemId:'',//体系表单编号
        }
      ],
      //输出文件列表的表单
      outputFileFrom: {
          idUse:null,//主键Id
          establishTime:null,//创建时间
          updateTime:null,//修改时间
          deleteSign:1,//删除标记
          editName:'',//编辑人

          filedName:'',//文件名称
          filedType:'',//文件类型
          outputDate:'',//完成时间
          department:'',//输出部门
          systemId:'',//体系表单编号

        },
      //输出文件列表的Scope格式
      outputFileScope:[
        {
          idUse:null,//主键Id
          establishTime:null,//创建时间
          updateTime:null,//修改时间
          deleteSign:1,//删除标记
          editName:'',//编辑人

          filedName:'',//文件名称
          filedType:'',//文件类型
          outputDate:'',//完成时间
          department:'',//输出部门

        }
      ],
      //输出文件的操作类型 1:新增；2：修改；3：删除
      outputFileDoe:0,
      //向数据库中，修改数据的变量组合,支持多个Id同时修改，Id需要用’/‘分割开；
      editOneFieldMaturityData:{
        index:null,//记录的是点击数据的索引值
        id:'',
        fieldName:'',
        fieldVal:''
      },
      editOneFieldMaturityDoe:0,
      //记录用到的多层索引，主要用到修改主页面变化的
      indexUse:{
        index:null,
        index1:null
      },

      //文件类型的选择器，选择的定常、触发；
      fileTypeOption:[
        {label: '体系表单',value: '体系表单'},
        {label: '临时文件',value: '临时文件'}
      ],
      //文件输出的周期
      outputDateOption:[
        {value: '随时', label: '随时'},
        {value: '每班', label: '每班'},
        {value: '每天', label: '每天'},
        {value: '每2天', label: '每2天'},
        {value: '每周', label: '每周'},
        {value: '每两周', label: '每两周'},
        {value: '每月', label: '每月'},
        {value: '每两月', label: '每两月'},
        {value: '每季度', label: '每季度'},
        {value: '每半年', label: '每半年'},
        {value: '每年', label: '每年'}
      ],
      //控制文件完成时间是否可用
      outputFileEndDateDisabled:true,
    }
  },
  watch: {
    'outputFileFrom.filedType'(newVal){
      if (newVal==='定常'){
        this.outputFileEndDateDisabled=false
      }
      else if (newVal==='触发'){
        this.outputFileEndDateDisabled=false
      }
    }
  },
  methods: {
    //退出登录
    logOut(){
      localStorage.removeItem('u_token');
      localStorage.removeItem('userName')
      this.$router.push('UserLogin')
    },
    //通用，查询用户信息的函数
    inquiry(){
      //输入用户编号，向后端查询信息
      const useId=localStorage.getItem('userName').replace(/"/g, '');
      this.$request.post('/useQueryPower',{
        queryFiledName:'changeModel',
        userId:useId,
      }).then(result=>{
        if (result.code === 401) {
          this.$router.push('UserLogin')
          alert("您未登录，请登录")
        }else {
          this.useName=result.data.name
          this.usePower=result.data.changeModel
          this.useId=useId
        }
      })
    },
    // 通用，弹窗关闭的时候，无意关闭弹窗的函数
    handleClose(done) {
      this.$confirm('确认关闭？')
          // eslint-disable-next-line no-unused-vars
          .then(_ => {
            done();
          })
          // eslint-disable-next-line no-unused-vars
          .catch(_ => {});
    },
    //在tab控件上单击的函数
    handleClick(tab, event) {
      console.log(tab, event);
      console.log(this.outputFileData)
    },
    //折叠框改变的时候
    handleChange(val) {
      if (val!==null && val!==undefined && val!==''){
        //给单击的这个项目表赋值，添加大项目、二级项目时候用
        this.maturityDataFromProject=_.cloneDeep(this.maturityData[this.collapseItems[val].key])
        //在总表中，再次筛选出第一个项目的内容
        const element = this.maturityData.filter(item => item.process_element === this.collapseItems[val].title)
        //把项目中的唯一子项目的内容找出来，形成一个数组
        const elementItem = [
          ...new Set(element
              .map(item => item.sub_element))
        ]
        //第一步：对数据先清空
        this.sub_element=[]
        //第二步：对每一个子项目进行循环，组合数据
        for (let j = 0; j < elementItem.length; j++) {
          //把子项目从项目表中找出来，形成一个新的数组
          const element1 = element.filter(item => item.sub_element === elementItem[j])
          //在子项目形成的新数组中，找到总则这一条，对提问表等内容进行赋值
          const elementTemp = element1.filter(item => item.quest_type === '总则')

          //对当前主干上的提问表内容进行赋值
          this.sub_element.push({
            //子项目名称
            sub_element_name:elementTemp[0].sub_element,
            //提问表
            question_form:{id:elementTemp[0].idUse,value:elementTemp[0].question_form},
            //执行案例
            execution_example:{id:elementTemp[0].idUse,value: elementTemp[0].execution_example},
            //分值
            score:{id:elementTemp[0].idUse,value:elementTemp[0].score},
            //参考文件
            reference_file:{id:elementTemp[0].idUse,value:elementTemp[0].reference_file},
            //问题相关，是一个数组
            questionItem:[]
          })
          console.log("测试问题",this.sub_element)
          //开始组合问题内容，首先找到所有的问题
          const problemTemp=element1.filter(item => item.quest_type === '问题')
          for (let i = 0; i < problemTemp.length; i++) {
            //组合问题表头数据
            this.sub_element[j].questionItem.push({
              id:problemTemp[i].idUse,
              questionName:problemTemp[i].question_form,//问题名称
              //措施，是一个数组，在数据表中，每一个措施，就是一个数据行。
              measures:[]
            })
            //组合措施数据\输出的文件
            let executionTemp=problemTemp[i].measures.split('|-|')
            let outputTemp=problemTemp[i].output.split('|-|')
            for (let k = 0; k < executionTemp.length; k++) {
              this.sub_element[j].questionItem[i].measures.push(
                  {
                    id: problemTemp[i].idUse,
                    //措施
                    measures:executionTemp[k].split('|%|')[0],
                    //负责人
                    person:executionTemp[k].split('|%|')[1],
                    //完成时间
                    endDate:executionTemp[k].split('|%|')[2],
                    //输出,所有的输出放在一个字符串下，一条措施对应一个输出
                    output:outputTemp[k]
                  }
              )
            }
          }
        }
      }
    },
    //添加、增加一个一个大的项目显示函数
    projectEditShow(doe){
      this.maturityDataDoe=doe
      let project=this.buttonStyle[this.buttonDoe].val
      //是新增一个大项目
      if (doe===1){
        this.process_elementDisabled=false
        this.titleUse='新增一个大项目'
        //新建立一个表单
        this.maturityDataFromProject={
          // id
          idUse: null, // type: String

              // 创建时间
              create_time: null, // type: LocalDateTime (can be represented as a Date object in JavaScript)

              // 更新时间
              update_time: null, // type: LocalDateTime (can be represented as a Date object in JavaScript)

              // 创建人
              creator: this.useId, // type: String

              // 流程状态
              process_status: '', // type: String

              // 更新人
              sys_updateUser: '', // type: String

              // 审核人
              sys_auditUser: '', // type: String

              // 审核时间
              sys_auditTime: null, // type: LocalDateTime (can be represented as a Date object in JavaScript)

              // 逻辑删除
              sys_deleted: 1, // type: Long (can be represented as a Number in JavaScript)

              // 项目 -> Project(记录最外层的，例如P7）
              project: project, // type: String

              // 过程要素 -> Process Element(记录第二层）
              process_element: '', // type: String

              // 子要素 -> Sub-element(记录第三层）
              sub_element: '', // type: String
              //记录是什么类型：有’总则‘，总则只有一个，有’问题‘，问题是多个，就是一个一个的提问表
              quest_type:'总则',//type: String

              // 提问表 -> Question Form 总则是记录提问表，问题，就是记录每一个小的问题，
              question_form: '', // type: String

              // 执行示例 -> Execution Example 只有在’总则‘中有内容，在’问题‘中，是没有内容；
              execution_example: '', // type: String

              // 分值 -> Score 只有在’总则‘中有内容，在’问题‘中，是没有内容；
              score: '', // type: String

              // 参考文件 -> Reference File 只有在’总则‘中有内容，在’问题‘中，是没有内容；
              reference_file: '', // type: String

              // 措施 -> Measures 只有在’问题‘中有内容，在’总则‘中，是没有内容；
              measures: '', // type: String

              // 输出 -> Output 只有在’总则‘中有内容，在’问题‘中，是没有内容；
              output: '需要编辑', // type: String

              // 顺序号 -> Sequence Number 只有在’总则‘中有内容，在’问题‘中，是没有内容；
              sequence_number: '', // type: String

              //质量体系文件
              quality_system:'',
        }
        this.projectEditDialog=true
      }
      //是增加一个子项目
      else if (doe===2){
        this.titleUse='添加一个子项目'
        //建立项目
        this.maturityDataFromProject.quest_type='总则'
        this.maturityDataFromProject.question_form=''
        this.maturityDataFromProject.execution_example=''
        this.maturityDataFromProject.reference_file=''
        this.maturityDataFromProject.sub_element=''
        this.maturityDataFromProject.score=''
        this.maturityDataFromProject.measures='请编辑措施|%|请编辑责任部门/人员|%|请编辑完成时间'
        this.maturityDataFromProject.output='请编辑输出'
        this.process_elementDisabled=true
        this.projectEditDialog=true
      }
      //是新增一个问题
      else if (doe===3){
        this.process_elementDisabled=true
        this.titleUse='添加一项问题'
        this.maturityDataFromProject.quest_type='问题'
        this.maturityDataFromProject.question_form=''
        this.maturityDataFromProject.execution_example=''
        this.maturityDataFromProject.score=''
        this.maturityDataFromProject.measures='请编辑措施|%|请编辑责任部门/人员|%|请编辑完成时间'
        this.maturityDataFromProject.output='请编辑输出'
        this.problemEditDialog=true
      }
      //是要对大项目进行排序
      else if (doe===1000){
        this.titleUse='您正在对大项目排序'
        this.sortItemDialog=true
      }
    },
    //添加、修改一个大项目点击确定
    projectEditOk(){
      //向后端发送信息，插入的是一行。
      if (this.maturityDataDoe===1 || this.maturityDataDoe===2 || this.maturityDataDoe===3){
        this.$request.post('/insertProjectMaturityManage',this.maturityDataFromProject).then(result=>{
          if (result.code === 401) {
            this.$router.push('UserLogin')
            alert("您未登录，请登录")
          } else {
            this.$message.success('插入成功')
            //重新筛选数据
            this.buttonMainSelect(this.buttonDoe)
            //关闭弹窗及列表窗口
            this.projectEditDialog=false
            this.problemEditDialog=false
            this.collapseName = ''
          }
        })
      }
    },
    //修改提问表，不止用在提问表上，所有的字段修改均来自他，除了1级目录，这个写死的。打开显示窗口
    questionForm(doe,index,element){
      this.editOneFieldMaturityDoe=doe
      //是修改提问表
      if (doe===1){
        this.titleUse='您正在修改《提问表》'
        this.fullTextDialog=true
        this.$nextTick(() => {
          this.initEditor();
          this.editor.txt.html(_.cloneDeep(element.value))
        })

        //组合修改数据记录
        this.editOneFieldMaturityData={
          index:index,
          id:element.id.toString(),
          fieldName:'question_form',
          fieldVal: ''
        }
      }
      //修改的是执行案例
      else if (doe===2){
        this.titleUse='您正在修改《执行案例》'
        this.fullTextDialog=true
        this.$nextTick(() => {
          this.initEditor();
          this.editor.txt.html(_.cloneDeep(element.value))
        })


        //组合修改数据记录
        this.editOneFieldMaturityData={
          index:index,
          id:element.id.toString(),
          fieldName:'execution_example',
          fieldVal: ''
        }
      }
      //修改分值
      else if (doe===3){
        this.titleUse='您正在修改《分值》'

        //组合数据
        //组合修改数据记录
        this.editOneFieldMaturityData={
          index:index,
          id:element.id.toString(),
          fieldName:'score',
          fieldVal: ''
        }

        this.inputNub=element.value
        this.nmbDialog=true
      }
      //修改参考文件
      else if (doe===4){
        this.titleUse='您正在修改《参考文件》'
        this.textInput=element.value
        //组合数据
        //组合修改数据记录
        this.editOneFieldMaturityData={
          index:index,
          id:element.id.toString(),
          fieldName:'reference_file',
          fieldVal: ''
        }
        this.textBigDialog=true
      }
      //修改子项目名称
      //是修改子项名称，弹出一个长文本框
      else if (doe===5){
        this.titleUse='修改子项目名称'
        this.textInput=element.sub_element_name
        //组合数据
        //组合修改数据记录
        this.editOneFieldMaturityData={
          index:null,
          id:null,
          fieldName:'sub_element',
          fieldVal: ''
        }
        this.textBigDialog=true
      }
    },
    //点击确定，对总表中的数据进行修改，是根据id，修改一个字符串的字段，修改的是字符串和数字，
    editMaturityManageOk() {
      if (this.editOneFieldMaturityDoe === 1 || this.editOneFieldMaturityDoe===2) {
        this.editOneFieldMaturityData.fieldVal = _.cloneDeep(this.editor.txt.html());
        this.fullTextDialog = false;
      }
      else if (this.editOneFieldMaturityDoe===3){
        this.editOneFieldMaturityData.fieldVal=_.cloneDeep(this.inputNub.toString())
        this.nmbDialog = false;
      }
      else if (this.editOneFieldMaturityDoe===4){
        this.editOneFieldMaturityData.fieldVal=_.cloneDeep(this.textInput)
        this.textBigDialog=false
      }
      //修改子项目名称，需要用到了了为添加子项目/大项目记录下来的数据，修改完成后，这个数据也要同步修改了
      else if (this.editOneFieldMaturityDoe===5){
        //从大表中，选出子项目名称是要修改的子项目数据
        const filteredData = this.maturityData.filter(item => item.sub_element === this.maturityDataFromProject.sub_element)
        //组合id,
        let idUse=''
        for (let i = 0; i < filteredData.length; i++) {
          if (i===0){
            idUse=filteredData[i].idUse
          }
          else{
            idUse=idUse+'/'+filteredData[i]
          }
        }

        //把id给修改的和值，给修改的变量
        this.editOneFieldMaturityData.id=idUse
        this.editOneFieldMaturityData.fieldVal=this.textInput
      }

      this.editOneFieldMaturityManage(this.editOneFieldMaturityData);

      const splitId = this.editOneFieldMaturityData.id.split('/');
      for (let i = 0; i < splitId.length; i++) {
        //修改主数据表中的内容
        const indexData = this.maturityData.findIndex(item => item.idUse === splitId[i])
        //修改页面上的显示
        this.maturityData[indexData][this.editOneFieldMaturityData.fieldName]=this.editOneFieldMaturityData.fieldVal
        if (this.editOneFieldMaturityDoe===1 || this.editOneFieldMaturityDoe===2 || this.editOneFieldMaturityDoe===3 || this.editOneFieldMaturityDoe===4){
          //修改页面上的显示
          const index = this.sub_element.findIndex(item => item[this.editOneFieldMaturityData.fieldName].id === splitId[i]);
          if (index !== -1) {
            // 使用 Vue.set 确保响应性
            this.$set(this.sub_element, index, {
              ...this.sub_element[index],
              [this.editOneFieldMaturityData.fieldName]: {
                ...this.sub_element[index][this.editOneFieldMaturityData.fieldName],
                value: this.editOneFieldMaturityData.fieldVal
              }
            });
        }
        }
        //没有设置id，说明在主表上，不能用id找了
        else if (this.editOneFieldMaturityDoe===5){
          let oldVal=this.maturityDataFromProject.sub_element
          const indexSub = this.sub_element.findIndex(item => item.sub_element_name===oldVal)
          if (indexSub !== -1) {
            // 使用 Vue.set 确保响应性
            this.$set(this.sub_element[indexSub], 'sub_element_name', this.editOneFieldMaturityData.fieldVal);
            this.maturityDataFromProject.sub_element=this.editOneFieldMaturityData.fieldVal
            this.textBigDialog=false
          }

        }
      }

    },
    //选择主导航上的不同按钮
    async buttonMainSelect(doe) {
      //记录用户现在
      this.buttonDoe = doe
      //关闭折叠窗口
      this.collapseName=''

      //设置按钮的背景颜色
      for (let i = 0; i < this.buttonStyle.length; i++) {
        this.buttonStyle[i].backColor = ''
        this.buttonStyle[i].textColor = ''
      }
      this.buttonStyle[doe].backColor = 'blue'
      this.buttonStyle[doe].textColor = 'white'

      //数据清空
      this.collapseItems=[]
      this.sub_element=[]
      this.maturityData=[]
      //向后端请求数据
        this.inquiryFiledSeveralAnd('project', this.buttonStyle[doe].val).then(() => {
          //给页面显示的变量赋值
          this.collapseItems = []
          for (let i = 0; i < this.maturityData.length; i++) {
            let isCollapseItem=0
            for (let j = 0; j < this.collapseItems.length; j++) {
              if (this.collapseItems[j].title===this.maturityData[i].process_element){
                isCollapseItem=1
                break
              }
            }
            //没有重复项,把数据添加进去，形成主目录
            if (isCollapseItem===0){
              this.collapseItems.push({title: this.maturityData[i].process_element,name: i,key: i,idUse: this.maturityData[i].idUse})
            }
          }
          //按照后端的数据进行排序
          this.collapseItems.sort((a, b) => {
            // 比较两个元素的sequence_number值
            return b.sequence_number-a.sequence_number ;
          });
          //重新梳理collapseItems的值，让他和折叠框的顺序对应
          for (let i = 0; i < this.collapseItems.length; i++) {
            this.collapseItems[i].name=i
          }
        });
    },
    //添加和修改一个问题,显示函数
    problemEditShow(doe,problemItem,index){
      this.problemDoe=doe
      this.problemFrom=problemItem
      //是修改问题名称
      if (doe===1){
        this.textInput=problemItem.questionName
        this.titleUse='您正在修改问题名称'
        this.editOneFieldMaturityData.id=problemItem.id
        this.editOneFieldMaturityData.fieldName='question_form'
        this.editOneFieldMaturityData.index=index
        this.problemTextBigDialog=true
      }
    },
    //编辑问题相关，点击确定做出的反应
    editProblemOk(){
      //是修改问题名称
      if (this.problemDoe===1){
        this.editOneFieldMaturityData.fieldVal=this.textInput
        //向后端发送数据，修改数据表
        this.editOneFieldMaturityManage(this.editOneFieldMaturityData);
        //修改主表数据
        let maturityIndex=this.maturityData.findIndex(item => item.idUse===this.editOneFieldMaturityData.id)
        this.maturityData[maturityIndex].question_form=this.editOneFieldMaturityData.fieldVal
        //修改主页数据
        const index = this.sub_element.findIndex(item => item.questionItem[this.editOneFieldMaturityData.index].questionName === this.problemFrom.questionName);
        if (index !== -1) {
          // 使用 Vue.set 确保响应性
          this.$set(this.sub_element[index], this.sub_element[index].questionItem[this.editOneFieldMaturityData.index].questionName, this.editOneFieldMaturityData.fieldVal);
          this.maturityDataFromProject.sub_element=this.editOneFieldMaturityData.fieldVal
          this.problemFrom.questionName=this.editOneFieldMaturityData.fieldVal
          this.problemTextBigDialog=false
        }
      }
    },
    //点击对措施的修改、添加等。需要一个富文本来编辑措施，文本框来编辑责任人、完成时间、文本框来完成输入
    measuresEditShow(doe,scope,index,index1){
      this.indexUse={
        index:index,
        index1:index1
      }
      this.measuresDoe=doe
      this.measuresScope=scope
      this.measuresFrom=_.cloneDeep(scope.row)
      //是新增一项措施
      if (doe===1){
        this.titleUse='您正在添加一个措施'
        this.measuresFrom.measures=''
        this.measuresFrom.endDate=''
        this.measuresFrom.person=''
         this.measuresFullTextDialog=true
        this.$nextTick(() => {
          this.initEditor();
          this.editor.txt.html(_.cloneDeep(this.measuresFrom.measures))
        })
      }
      //是编辑一项措施
      else if (doe===2){
        this.titleUse='您正在修改一个措施'
        this.measuresFullTextDialog=true
        this.editOneFieldMaturityData.id=scope.row.id
        this.$nextTick(() => {
          this.initEditor();
          this.editor.txt.html(_.cloneDeep(this.measuresFrom.measures))
        })
      }
      //是删除一项措施
      else if (doe===3){
        if (this.sub_element[index].questionItem[index1].measures.length<=1){
          this.$message.error('当前只有一条措施，无法继续删除')
          return
        }
        this.titleUse='您正在删除一个措施'
        this.measuresFullTextDialog=true
        this.editOneFieldMaturityData.id=scope.row.id
        this.$nextTick(() => {
          this.initEditor();
          this.editor.txt.html(_.cloneDeep(this.measuresFrom.measures))
        })
      }
    },
    //点击修改措施，确定的时候做的反应
    measuresEditOk(){
      //进行数据判断
      if (this.measuresFrom.person==='' || this.measuresFrom.person===null || this.measuresFrom.person===undefined){
        this.$message.success('您未填写责任人')
        return;
      }
      else if (this.measuresFrom.endDate==='' || this.measuresFrom.endDate===null || this.measuresFrom.endDate===undefined){
        this.$message.success('您未填写完成日期')
        return;
      }
      //是新增一条措施
      if (this.measuresDoe===1){
        //组合数据,首先找到编辑的这一行
        const index=this.maturityData.findIndex(item=>item.idUse===this.measuresFrom.id)
        let measures=this.maturityData[index].measures+'|-|'+this.editor.txt.html()+'|%|'+this.measuresFrom.person+'|%|'+this.measuresFrom.endDate
        //组合修改数据组，措施
        this.editOneFieldMaturityData.id=this.measuresFrom.id
        this.editOneFieldMaturityData.fieldName='measures'
        this.editOneFieldMaturityData.fieldVal=measures
        this.editOneFieldMaturityManage(this.editOneFieldMaturityData)
        //修改大表数据
        this.maturityData[index].measures=this.editOneFieldMaturityData.fieldVal
        //组合修改数据组，输出物的组合数据
        this.editOneFieldMaturityData.fieldName='output'
        this.editOneFieldMaturityData.fieldVal=this.maturityData[index].output+'|-|'+this.measuresFrom.output
        this.editOneFieldMaturityManage(this.editOneFieldMaturityData)
        //修改大表数据
        this.maturityData[index].output=this.editOneFieldMaturityData.fieldVal
        //修改显示数据,首先组合数据
        let newMeasuresItem={
            id: this.measuresFrom.id,
              //措施
              measures:this.editor.txt.html(),
            //负责人
            person:this.measuresFrom.person,
            //完成时间
            endDate:this.measuresFrom.endDate,
            //输出,所有的输出放在一个字符串下，一条措施对应一个输出
            output:this.measuresFrom.output

        }
        // 使用 Vue.set 确保响应性
        this.$set(this.sub_element[this.indexUse.index], this.sub_element[this.indexUse.index].questionItem[this.indexUse.index1].measures.push(newMeasuresItem));
        this.measuresFullTextDialog=false
      }
      //是编辑，修改
      else if (this.measuresDoe===2){
        //组合数据,首先找到编辑的这一行
        const index=this.maturityData.findIndex(item=>item.idUse===this.measuresFrom.id)
        //组合数据
        let tempMeasures=this.sub_element[this.indexUse.index].questionItem[this.indexUse.index1].measures
        let tempItem=this.sub_element[this.indexUse.index].questionItem[this.indexUse.index1].measures[this.measuresScope.$index]
        tempItem.measures=this.editor.txt.html()
        tempItem.person=this.measuresFrom.person
        tempItem.output=this.measuresFrom.output
        tempItem.endDate=this.measuresFrom.endDate
        tempMeasures.splice(this.measuresScope.$index,1,tempItem)
        //组合成变量数据,向后端写入数据
        this.editOneFieldMaturityData.fieldVal=''
        for (let i = 0; i < tempMeasures.length; i++) {
          if (i===0){
            this.editOneFieldMaturityData.fieldVal=tempMeasures[i].measures+'|%|'+tempMeasures[i].person+'|%|'+tempMeasures[i].endDate
          }
          else {
            this.editOneFieldMaturityData.fieldVal=this.editOneFieldMaturityData.fieldVal+'|-|'+tempMeasures[i].measures+'|%|'+tempMeasures[i].person+'|%|'+tempMeasures[i].endDate
          }
        }
        this.editOneFieldMaturityData.fieldName='measures'
        //向后端发送数据
        this.editOneFieldMaturityManage(this.editOneFieldMaturityData)
        //修改大表数据
        this.maturityData[index].measures=this.editOneFieldMaturityData.fieldVal
        //修改输出的数据
        for (let i = 0; i < tempMeasures.length; i++) {
          if (i===0){
            this.editOneFieldMaturityData.fieldVal=tempMeasures[i].output
          }
          else {
            this.editOneFieldMaturityData.fieldVal=this.editOneFieldMaturityData.fieldVal+'|-|'+tempMeasures[i].output
          }
        }
        this.editOneFieldMaturityData.fieldName='output'
        this.editOneFieldMaturityManage(this.editOneFieldMaturityData)

        //修改大表数据
        this.maturityData[index].output=this.editOneFieldMaturityData.fieldVal
        //修改前端显示数据
        // 使用 Vue.set 确保响应性
        this.$set(this.sub_element[this.indexUse.index], this.sub_element[this.indexUse.index].questionItem[this.indexUse.index1].measures=tempMeasures);
        this.measuresFullTextDialog=false
      }
      //是删除
      else if (this.measuresDoe===3){
        //组合数据,首先找到编辑的这一行
        const index=this.maturityData.findIndex(item=>item.idUse===this.measuresFrom.id)
        //组合数据
        let tempMeasures=this.sub_element[this.indexUse.index].questionItem[this.indexUse.index].measures
        //把用户选择的删除掉
        tempMeasures.splice(this.measuresScope.$index,1)
        //组合成变量数据,向后端写入数据，现在做的是把措施的数据组合出来，修改措施的数据
        this.editOneFieldMaturityData.fieldVal=''
        for (let i = 0; i < tempMeasures.length; i++) {
          if (i===0){
            this.editOneFieldMaturityData.fieldVal=tempMeasures[i].measures+'|%|'+tempMeasures[i].person+'|%|'+tempMeasures[i].endDate
          }
          else {
            this.editOneFieldMaturityData.fieldVal=this.editOneFieldMaturityData.fieldVal+'|-|'+tempMeasures[i].measures+'|%|'+tempMeasures[i].person+'|%|'+tempMeasures[i].endDate
          }
        }
        this.editOneFieldMaturityData.fieldName='measures'
        this.editOneFieldMaturityManage(this.editOneFieldMaturityData)
        //修改总表上的数据，是措施数据
        this.maturityData[index].measures=this.editOneFieldMaturityData.fieldVal
        //组合成变量数据，向后端写入数据，现在做的是把输出的数据组合出来，修改输出的数据
        for (let i = 0; i < tempMeasures.length; i++) {
          if (i===0){
            this.editOneFieldMaturityData.fieldVal=tempMeasures[i].output
          }
          else {
            this.editOneFieldMaturityData.fieldVal=this.editOneFieldMaturityData.fieldVal+'|-|'+tempMeasures[i].output
          }
        }
        this.editOneFieldMaturityData.fieldName='output'
        this.editOneFieldMaturityManage(this.editOneFieldMaturityData)
        //修改大表数据，输出修改
        this.maturityData[index].output=this.editOneFieldMaturityData.fieldVal

        //修改前端显示数据
        // 使用 Vue.set 确保响应性
        this.$set(this.sub_element[this.indexUse.index], this.sub_element[this.indexUse.index].questionItem[this.indexUse.index1].measures=tempMeasures);
        this.measuresFullTextDialog=false
      }
    },
    //新增、编辑输出物的显示函数
    outputFileEditShow(doe,scope){
      this.outputFileDoe=doe
      this.outputFileScope=scope
      //是新增
      if (doe===1){
        this.titleUse='您正在新增加一项输出'
        this.outputFileFrom={
          idUse:null,//主键Id
          establishTime:null,//创建时间
          updateTime:null,//修改时间
          deleteSign:1,//删除标记
          editName:this.useName,//编辑人

          filedName:'',//文件名称
          filedType:'',//文件类型
          outputDate:'',//完成时间
          department:'',//输出部门
          systemId:'',//体系表单编号
        }
        this.outPutEditDialog=true
      }
    },
    //在新增、编辑输出物的窗口中点击确定按钮
    outputFileEditOk(){
      if (this.outputFileFrom.filedName===null || this.outputFileFrom.filedName===undefined || this.outputFileFrom.filedName===''){
        this.$message.error('文件名未填写')
        return
      }else if (this.outputFileFrom.filedType===null || this.outputFileFrom.filedType===undefined || this.outputFileFrom.filedType===''){
        this.$message.error('文件类型未选择')
        return
      }else if (this.outputFileFrom.outputDate===null || this.outputFileFrom.outputDate===undefined || this.outputFileFrom.outputDate===''){
        this.$message.error('文件日期未选择')
        return
      }
      // 是插入一条输出数据
      if (this.outputFileDoe===1){
        //调用插入函数
        this.insetOneOutputFile(this.outputFileFrom).then(()=>{
          // 把文件所有的筛选出来
          this.inquiryOutputFileAll()
          this.outPutEditDialog=false
        })
      }
    },
    //在弹出的给大项目排序中点击确定
    sortItemEditOk(){
      //组合数据，修改顺序数据
      for (let i = 0; i < this.collapseItems.length; i++) {
        this.editOneFieldMaturityData.id=this.collapseItems[i].idUse
        this.editOneFieldMaturityData.fieldName='sequence_number'
        this.editOneFieldMaturityData.fieldVal=String(i)
        this.editOneFieldMaturityManage(this.editOneFieldMaturityData)
      }
      this.sortItemDialog=false
    },
    //在大项目上移、下移中，点击移动
    sortItemMove(doe,scope){
      //是上移
      if (doe===1){
        if (scope.$index===0){
          this.$message.success('已经为第一位了，无法移动')
        }
        else {
          let temp=_.cloneDeep(this.collapseItems)
          temp.splice(scope.$index,1)
          temp.splice(scope.$index-1,0,this.collapseItems[scope.$index])
          //组合数据，修改顺序数据
          for (let i = 0; i < temp.length; i++) {
            this.editOneFieldMaturityData.id=temp[i].idUse
            this.editOneFieldMaturityData.fieldName='sequence_number'
            this.editOneFieldMaturityData.fieldVal=String(i)
          }
          this.collapseItems=temp
        }
      }
      //是下移
      if (doe===2){
        if (scope.$index===this.collapseItems.length-1){
          this.$message.success('已经为最后一位了，无法移动')
        }
        else {
          let temp=_.cloneDeep(this.collapseItems)
          temp.splice(scope.$index,1)
          temp.splice(scope.$index+1,0,this.collapseItems[scope.$index])
          this.collapseItems=temp
        }
      }

    },
    //辅助函数：对输出物部分插入一行数据，向后端发送数据
    async insetOneOutputFile(outputFileFrom){
      this.$request.post('/insetOneOutputFileMaturityManage',outputFileFrom).then(result=>{
        if (result.code === 401) {
          this.$router.push('UserLogin')
          alert("您未登录，请登录")
        } else {
          this.$message.success('插入成功')
        }
      })
    },
    //辅助函数：对输出物所有的信息筛选出来
    async inquiryOutputFileAll(){

      this.$request.post('/inquiryOutputFileAllMaturityManage').then(result=>{
        if (result.code === 401) {
          this.$router.push('UserLogin')
          alert("您未登录，请登录")
        } else {
          this.outputFileData= result.data
        }
      })

    },
    //辅助函数：根据Id，修改一个字段的值，Id可能是多个，后端进行分割，组合，分割符“/”.需要传入的是editOneFieldMaturityData数据
    async editOneFieldMaturityManage(val){
      //向后端发送数据，
      this.$request.post('/editOneFieldMaturityManage',val).then(result=>{
            if (result.code === 401) {
              this.$router.push('UserLogin')
              alert("您未登录，请登录")
            } else {
              this.$message.success('修改成功')
            }
      })
    },
    //辅助函数：根据字段名，去搜索等于这个字段数据的所有数据,多个字段，用的是并且。现在写好的是根据一个字段搜索,并且赋值给成熟度管理的总表
    inquiryFiledSeveralAnd(firstFiledName,firstFiledVal){
      //向后端发送请求
      return this.$request.post('/inquiryFiledSeveralAndMaturityManage',{
        firstFiledName:firstFiledName,
        firstFiledVal:firstFiledVal,
      }).then(result=>{
        if (result.code === 401) {
          this.$router.push('UserLogin')
          alert("您未登录，请登录")
        } else {
          this.maturityData=[]
          this.maturityData=result.data
        }
      })
    },
    //辅助函数：  初始化 wangEditor
    initEditor() {
      // 检查是否已经存在编辑器实例
      if (this.editor) {
        return; // 如果已经存在，则直接返回，不重复初始化
      }
      this.editor = new E(this.$refs.editorContainer);
      this.editor.config.menus = [
        'head',
        'bold',
        'italic',
        'underline',
        'strikeThrough',
        'foreColor',
        'backColor',
        'list',
        'justify',
        'table',
        // 其他你需要的菜单...
      ]
      this.editor.create();
    },
  },
  mounted() {
    this.inquiry()
    this.maturityData=[]
    this.maturityDataFrom={}
    this.inquiryOutputFileAll()
    this.buttonMainSelect(5)
  },
  //组件销毁前的函数
  beforeDestroy() {
    // 组件销毁前，销毁 wangEditor 实例
    if (this.editor) {
      this.editor.destroy();
      this.editor = null;
    }
  },
}
</script>


<style scoped>
/* 主体左侧的工作步骤栏用到的数据包围的div的样式*/

.el-footer {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  border-width: 3px; /* 设置边框宽度为3像素 */
  border-color: blue; /* 设置边框颜色为蓝色 */
  border-style: solid; /* 设置边框样式为实线 */
  padding: 10px; /* 添加内边距 */
  border-left-color: white;
  border-top: white;
}

.el-aside {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  border-width: 3px; /* 设置边框宽度为3像素 */
  border-color: blue; /* 设置边框颜色为蓝色 */
  border-style: solid; /* 设置边框样式为实线 */
  padding: 10px; /* 添加内边距 */
  height: 89vh;
}

.el-main {
  color: #333;
  text-align: center;
  border-width: 3px; /* 设置边框宽度为3像素 */
  border-color: blue; /* 设置边框颜色为蓝色 */
  border-left-color: white;
  border-style: solid; /* 设置边框样式为实线 */
  padding: 10px; /* 添加内边距 */
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.headMain{
  color: #ffffff; /* 设置字体颜色为红色 */
  font-size: 18px;
}
.center-text {
  /* 使用 margin-left 和 margin-right auto 来实现居中效果 */
  margin-left: auto;
  margin-right: auto;
  /* 注意：如果 header 内只有这两个元素，你可能不需要 margin-right: auto */
}

/*自定义样式*/
</style>